<template>
  <div>
    <el-card>
      <h1 style="font-weight:700;font-size:24px">网格门户</h1>
      <el-divider></el-divider>
      <div>

        <div class="visualization-map" v-show="rid == '65f12041caadbc7190c137b9'">
          <p style="text-align: center;margin-left: 350px;font-size: 35px;">xx区</p>
          <div class="map-section section1" style="--color: pink;">小区总数:{{ list[0].value }}</div>
          <div class="map-section section2" style="--color: #ff5733;">房屋总数:{{ list[1].value }}</div>
          <div class="map-section section3" style="--color: pink;">人员总数:{{ list[2].value }}</div>
          <div class="map-section section4" style="--color: #ff5733;">车辆总数:{{ list[3].value }}</div>
          <!-- 更多section -->
        </div>
        <div class="visualization-map" v-show="rid == '65f8dd051c78378ca710a242'">
          <p style="text-align: center;margin-left: 350px;font-size: 35px;">富力江湾小区</p>
          <div class="map-section section1" style="--color: pink;">小区总数:{{ list1[0].value }}</div>
          <div class="map-section section2" style="--color: #ff5733;">房屋总数:{{ list1[1].value }}</div>
          <div class="map-section section3" style="--color: pink;">人员总数:{{ list1[2].value }}</div>
          <div class="map-section section4" style="--color: #ff5733;">车辆总数:{{ list1[3].value }}</div>
          <!-- 更多section -->
        </div>

      </div>
      <div v-show="rid == '65f12041caadbc7190c137b9'" ref="echartsContainer"
        style="width: 600px; height: 400px;position: relative;"></div>
      <div v-show="rid == '65f8dd051c78378ca710a242'" ref="echartsContainer"
        style="width: 600px; height: 400px;position: relative;"></div>
      <el-card v-show="rid == '65f12041caadbc7190c137b9'" class="box-card">
        <div slot="header" class="clearfix">
          <span>待审核任务</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="chakan">>>全部任务</el-button>
        </div>
        <div v-for="o in weilist" :key="o._id" class="text item">
          {{ o.address }} {{ o.nandu }} 任务状态{{ o.zhiliang }} {{ o.sta }}
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartsComponent',
  data() {
    return {
      list: [],
      list1: [],
      weilist: [],
      rid: '',
    }
  },
  methods: {
    async getcount() {
      let { data } = await this.axios.get('/count')
      this.list = data.arr
      this.list1 = data.arr1
    },
    async getdata() {
      this.rid = JSON.parse(sessionStorage.getItem("list")).roleid
      console.log(this.rid);
      let { data } = await this.axios.get('/renwulist')
      this.weilist = data.weilist
      console.log(this.weilist);
    },
    chakan() {
      this.$router.push('/rwgl')
    }
  },
  created() {
    this.getcount(),
      this.getdata()
  },
  async mounted() {
    let { data } = await this.axios.get('/count')
    // this.list = data.arr
    if (this.rid == '65f12041caadbc7190c137b9') {
      var myChart = echarts.init(this.$refs.echartsContainer);
      myChart.setOption({
        // ECharts 配置项
        title: {
          text: '统计',
          left: 'center'
        },
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left'
        },

        series: [{
          name: '销量',
          type: 'pie',
          data: data.arr,
          label: {
            normal: {
              show: true,
              formatter: '{b}: {d}%' // 显示名称和百分比
            }
          }
        }],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      });
    } else {
      var myChart = echarts.init(this.$refs.echartsContainer);
      myChart.setOption({
        // ECharts 配置项
        title: {
          text: '统计',
          left: 'center'
        },
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left'
        },

        series: [{
          name: '销量',
          type: 'pie',
          data: data.arr1,
          label: {
            normal: {
              show: true,
              formatter: '{b}: {d}%' // 显示名称和百分比
            }
          }
        }],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      });
    }

  }
}
</script>

<style>
.visualization-map {
  position: relative;
  width: 800px;
  /* 设置大图宽度 */
  height: 230px;
  /* 设置大图高度 */
  margin-left: 150px;
  /* vertical-align: middle;
  text-align: center; */
}

.map-section {
  position: absolute;
  width: 200px;
  /* 每个区域的宽度 */
  height: 130px;
  line-height: 130px;
  text-align: center;
  /* 每个区域的高度 */
  background-color: var(--color, #ccc);
  /* 使用CSS变量设置颜色 */
  /* 其他样式，如边框、阴影等 */
}

/* 样式化section1 */
.section1 {
  top: 50px;
  /* section1的位置 */
  left: 75px;
  /* section1的位置 */
  /* 其他section1的样式 */
}

/* 样式化section2 */
.section2 {
  top: 50px;
  /* section1的位置 */
  left: 335px;
  /* section1的位置 */
  /* 其他section1的样式 */
}

/* 样式化section3 */
.section3 {
  top: 50px;
  /* section1的位置 */
  left: 575px;
  /* section1的位置 */
  /* 其他section1的样式 */
}

.section4 {
  top: 50px;
  /* section1的位置 */
  left: 835px;
  /* section1的位置 */
  /* 其他section1的样式 */
}




.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
  position: absolute;
  left: 1100px;
  top: 460px
}
</style>